<template>
  <div class="app-main-container">
    <div class="app-main-title">{{ $t('message.stlb') }}</div>
    <div class="doumee-filter">
      <el-input v-model="filters.entityId" :placeholder="$t('message.stId')" clearable />
      <el-input v-model="filters.entityName" :placeholder="$t('message.stmc')" clearable />
      <el-input v-model="filters.doorName" :placeholder="$t('message.crkmc')" clearable />
      <el-input v-model="filters.deviceId" :placeholder="$t('message.sbxlh')" clearable />
      <el-button v-preventReClick type="primary" @click="search">{{ $t('message.cz') }}</el-button>
      <el-button v-preventReClick @click="clear">{{ $t('message.clear') }}</el-button>
    </div>
    <div class="doumee-filter">
      <el-input v-model="entityId" :placeholder="$t('message.qsr') + $t('message.stId')"" />
      <el-button type="primary" @click="synchronization">{{ $t('message.tbsb') }}</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column align="center" :label="$t('message.stId')" prop="entityId" min-width="300" />
      <el-table-column align="center" :label="$t('message.stmc')" prop="entrtyName" min-width="200" />
      <el-table-column align="center" :label="$t('message.crkmc')" prop="doorName" min-width="200" />
      <el-table-column align="center" :label="$t('message.sbxlh')" prop="deviceSn" min-width="200" />
      <el-table-column align="center" :label="$t('message.sbmc')" prop="name" min-width="200" />
      <el-table-column align="center" :label="$t('message.sbxh')" prop="deviceModel" min-width="200" />
      <el-table-column align="center" :label="$t('message.tbsj')" prop="createTime" min-width="200" />
    </el-table>
    <div class="flex-cc doumee-pagination">
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :current-page.sync="page"
        :total="totalCount"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { crowdedAdd, crowdedList } from '@/api'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      current: 1,
      page: 1,
      totalCount: 10,
      list: [],
      listLoading: true,
      filters: {
        entityId: '',
        entityName: '',
        doorName: '',
        deviceId: ''
      },
      entityId: ''
    }
  },
  created() {
    this.listLoading = false
    this.initData()
  },
  methods: {
    handleCurrentChange(val) {
      // console.log(`当前页:`, val)
      this.page = val
      this.getEntity()
    },
    initData() {
      this.getEntity()
    },
    getEntity() {
      crowdedList({
        pagination: {
          firstQueryTime: parseTime(new Date()),
          page: this.page,
          rows: 10
        },
        param: {
          venueId: sessionStorage.getItem('venueId'),
          deviceId: this.filters.deviceId,
          doorName: this.filters.doorName,
          id: this.filters.entityId,
          name: this.filters.entityName
        },
        gymId: sessionStorage.getItem('venueId')
      }).then(res => {
        // console.log('-----', res)
        if (res.errorCode === '000000') {
          this.totalCount = Math.ceil(res.totalCount / 10) * 10
          this.current = this.page
          this.list = res.recordList
        }
      }).catch(err => {
        console.log('-----', err)
      })
    },
    clear() {
      this.filters.entityId = ''
      this.filters.entityName = ''
      this.filters.doorName = ''
      this.filters.deviceId = ''
      this.page = 1
      this.totalCount = 10
      this.getEntity()
    },
    search() {
      this.page = 1
      this.totalCount = 10
      this.getEntity()
    },
    synchronization() {
      if (!this.entityId.length) {
        this.$message.warning(this.$t('message.qxsrstId'))
        return
      }
      crowdedAdd({
        param: {
          id: this.entityId,
          venueId: sessionStorage.getItem('venueId')
        }
      }).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.tbcg'))
          this.entityId = ''
          this.getEntity()
        } else {
          this.$message.error(this.$t('message.tbsb'))
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-style {
  display: flex;
  justify-content: space-between;
  background-color: #f2f2f2;
  margin: -10px -20px -30px;
  height: 50px;
  .bottom-left {
    margin-left: 20px;
    height: 20px;
    margin-top: 15px;
    .sum-title-style {
      font-size: 15px;
      color: #222;
    }
    .sum-pay-value-style {
      font-size: 17px;
      font-weight: 500;
      color: #DD0707;
    }
    .dis-title-style {
      font-size: 14px;
      color: #222;
    }
    .discoun-style {
      font-size: 16px;
      color: #DD0707;
    }
  }
  .bottom-right {
    margin-right: 20px;
    margin-top: 10px;
    height: 30px;
    .pay-action-style {
      width: 100px;
      height: 30px;
      font-size: 15px;
      line-height: 1px;
      vertical-align: middle
    }
  }
}

</style>
